{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
	<h3 class="pb-3">新建收费</h3>
	<table class="layui-table layui-table-form">
		<tr><td class="layui-td-gray-2">学生<font>*</font></td>
			<td>
				<!-- <input type="text" name="student_id"  lay-verify="required" lay-reqText="请完善学生编号" value="" autocomplete="off" placeholder="请输入学生编号" class="layui-input"> -->
				
				<select name="student_id" id="" lay-search="">
					<option value="0"></option>
					{volist name=":get_student()" id="v"}
					<option value="{$v.id}" >{$v.name} </option>
					{/volist}
				</select>
			</td>

				<td class="layui-td-gray-2">缴费时间</td>
			<td><input type="text" name="jiaofei_time"  value="" readonly id="laydate_jiaofei_time" autocomplete="off" placeholder="请选择" class="layui-input"></td>
		</tr>
				<tr><td class="layui-td-gray-2">开始时间</td>
			<td><input type="text" name="start_time"  value="" readonly id="laydate_start_time" autocomplete="off" placeholder="请选择" class="layui-input"></td><td class="layui-td-gray-2">结束时间</td>
			<td><input type="text" name="end_time"  value="" readonly id="laydate_end_time" autocomplete="off" placeholder="请选择" class="layui-input"></td>
		</tr>
		
				<tr>
					<td class="layui-td-gray-2">类型</td>
			<td>
				<select name="type_id" id="type_id" lay-search="" lay-filter="type" class="changemoney" onchange="changemoney()">
					<option value="0"></option>
					{volist name=":get_type()" id="v"}
					<option value="{$v.id}" class="shoufei_{$v.id}" data-value="{$v.shoufei}">{$v.title} ￥<span >{$v.shoufei}</span>  </option>
					{/volist}
				</select>
			</td>
			<td class="layui-td-gray-2">时长</td>
			<td>
				<select name="shichang_id" id="shichang_id" lay-search="" lay-filter="shichang"  class="changemoney"  onchange="changemoney()">
					<option value="0"></option>
					{volist name=":get_shichang()" id="v"}
					<option value="{$v.id}" class="shichang_{$v.id}" data-value="{$v.money}">{$v.shichang} ￥<span  class="shichang">{$v.money}</span></option>
					{/volist}
				</select>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray-2" >包含项目</td>
			<td  colspan='3'>
				{volist name=":get_type()" id="v"}
				<input type="checkbox" lay-filter="baohan" name="baohan[]" value="{$v.id}" title="{$v.title}" lay-skin="primary" />￥{$v.shoufei}</br>
				{/volist}

			
		</tr>
		<tr>
					<td class="layui-td-gray-2">月交分摊</td>
			<td colspan="3"><div class="fentan"></div></td>
		</tr>
				<tr>
					<td class="layui-td-gray-2">缴费金额</td>
			<td><input type="text" name="money" id="money"  value="0" autocomplete="off" placeholder="请输入缴费金额" class="layui-input"></td>
					<td class="layui-td-gray-2">优惠内容</td>
			<td><input type="text" name="neirong"  value="" autocomplete="off" placeholder="优惠内容" class="layui-input"></td>
					</td>
				</tr>
				<tr><td class="layui-td-gray-2">减免原因</td>
			<td><input type="text" name="yuanyin"  value="" autocomplete="off" placeholder="减免原因" class="layui-input"></td><td class="layui-td-gray-2">备注</td>
			<td><input type="text" name="remark"  value="" autocomplete="off" placeholder="请输入备注" class="layui-input"></td>
		</tr>
	</table>
	<div class="pt-3">
		<input type="hidden" name="id" value="0"/>
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	var moduleInit = ['tool'];

	function gouguInit() {
		var form = layui.form, tool = layui.tool;
		//日期选择
		layui.laydate.render({
			elem: '#laydate_jiaofei_time' //指定元素
		});//日期选择
		layui.laydate.render({
			elem: '#laydate_start_time' //指定元素
		});//日期选择
		layui.laydate.render({
			elem: '#laydate_end_time' //指定元素
		});
		

				
		//监听提交
		form.on('submit(webform)', function (data) {
			
			let callback = function (e) {
				layer.msg(e.msg);
				if (e.code == 0) {
					tool.sideClose(1000);
				}
			}
			tool.post("/admin/shoufei/add", data.field, callback);
			return false;
		});
		/*$('#type_id').on('change', function () {
			alert(1);
			
		});*/
		form.on('select(type)', function (data) {
		　　let val = data.value;
			let shoufei =$(".shoufei_"+val).data('value');
			console.log(shoufei);
			let shichang_id =$("#shichang_id").val();
			let shichang = 0
			if(shichang_id>0){
				shichang = $(".shichang_"+shichang_id).data('value')
			}
			$("#money").val(shichang+shoufei);
			$(".fentan").text((shichang+shoufei)/12);
			/*console.log(shichang);
			
			console.log(data);*/
		});
		form.on('select(shichang)', function (data) {
		　　let val = data.value;
			let shichang =$(".shichang_"+val).data('value');
			console.log(shichang);
			let type_id =$("#type_id").val();
			let shoufei= 0
			if(type_id>0){
				shoufei = $(".shoufei_"+type_id).data('value')
			}
			$("#money").val(shichang+shoufei)
			$(".fentan").text((shichang+shoufei)/12);
			/*console.log(shichang);
			
			console.log(data);*/
		});
		form.on('checkbox(baohan)', function (data) {
		　　let val = data.value;
			console.log(data);
			if(data.elem.checked){
				//判断当前多选框是选中还是取消选中
				//$("input[data-rule='"+val+"']").prop("checked", true);//true:选中 false:不选中
			}
			else{
				//$("input[data-rule='"+val+"']").prop("checked", false);
			}
			form.render();//实时渲染选中和不选中的样式
		});
		/*$('#type_id').change(function() {
            alert('222');
        });
		function changemoney(){
			alert("111");
		}*/
	}
	
	/*function changemoney(){
		alert("333");
	}*/
	
</script>
{/block}
<!-- /脚本 -->